<template>
	<view class="periodical">
		<view class="index">
		  <text>No.</text>
		  <text class="periodical-num">{{(periodical < 10) ? ('0'+periodical) : periodical}}</text>
      <view class="line"></view>
		</view>
    <view class="date">
      <text class="year">{{month}}月</text>
      <text class="month">{{year}}</text>
    </view>
	</view>
</template>

<script>
	export default {
    props:{
      periodical: Number
    },
		data() {
			return {
				year: new Date().getFullYear(),
        month: ''
			};
		},
    created() {
      const months = ['一','二','三','四','五','六','七','八','九','十','十一','十二'];
      let month = new Date().getMonth();
      this.month = months[month];
    }
	}
</script>

<style lang="scss">
.periodical{
  display: flex;
  flex-direction: row;
  align-items: center;
  height:60rpx;
  .index{
    margin-left: 10rpx;
    display: flex;
    flex-direction:row;
    align-items: baseline;
    & text{
      font-size: 30rpx;
    }
    .periodical-num{
      font-size: 60rpx;
      font-weight: 500;
      color: #000000;
      margin-right: 14rpx;
    }
    .line{
      height: 44rpx;
      margin-right: 14rpx;
      border-left: 1px solid #000000;
    }
  }
  .date{
    display: flex;
    flex-direction: column;
    font-size: 24rpx;
    margin-left: 10rpx;
  }
}
</style>
